import copy from 'copy-to-clipboard';
import { CopyOutlined } from '@ant-design/icons';
import { Button, Collapse, message } from 'antd';
import React from 'react';
import CodeEditor from '@/components/CodeEditor';

interface Props {
  value: string,
  title: string,
  setValue: (value: string) => void;
  languageType: string,
}

const CollapsePanel: React.FC<Props> = (props) => {

  const { value, setValue, title, languageType } = props;

  return <Collapse defaultActiveKey={['1', '2']}>
    <Collapse.Panel
      header={title}
      key="1"
      className="code-collapse-panel"
      extra={
        <Button
          size="small"
          icon={<CopyOutlined />}
          onClick={(e) => {
            copy(value ?? '');
            e.stopPropagation();
            message.success('已复制到剪切板');
          }}
        >
          复制
        </Button>
      }
    >
      <CodeEditor onChange={(e) => setValue(e)} value={value ?? ''} height={400} language={languageType} />
    </Collapse.Panel>
  </Collapse>
}

export default CollapsePanel;
